<include file="Public/header"/>
<body class="body-bg">
<div class="park-header">
    <div class="park-header__left" onClick="window.location='/Home/Index/index/';">
        <i class="iconfont icon-fanhui"></i>
    </div>
    <div class="park-detail-navs">
        <ul>
            <li class="active" data-target="#goods">商品</li>
            <li data-target="#detail">详情</li>
            <li data-target="#comment">评论</li>
        </ul>
    </div>
</div>
<div class="container mb-footer">
    <!-- 商品 -->
    <div id="goods">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <volist name="goods_img" id="val">
                <div class="swiper-slide">
                    <div class="park-detail-swiper-pic" style="background-image: url({$val.images})"></div>
                </div>
                </volist>
            </div>
            <div class="swiper-pagination"></div>
        </div>
        <div class="park-goods-info">
            <p class="park-goods-info__name">{$info.goods_name}</p>
            <p class="park-goods-info__desc">{$info.keywords}</p>
            <p class="park-goods-info__price">{$info['shop_price']}</p>
        </div>
        <div class="park-row-list" style="margin-top: 0;">
            <div id="choose-spec" class="park-row-item">
                <div class="park-row-item__left">
                    <span>请选择规格</span>
                </div>
                <div class="park-row-item__right">
                    <i class="iconfont icon-gengduo"></i>
                </div>
            </div>
        </div>
        <div class="park-row-list" onclick="window.location='/Home/Index/store/id/{$info.store_id}';">
            <div class="park-row-item">
                <div class="park-row-item__left">
                    <i class="iconfont icon-dian"></i>
                    &nbsp; &nbsp;
                    <span>{$info['store_name']}旗舰店</span>
                </div>
                <div class="park-row-item__right">
                    <i class="iconfont icon-gengduo"></i>
                </div>
            </div>
        </div>
        <div class="park-goods-detail-text">{:htmlspecialchars_decode($info['goods_content'])}</div>
    </div>
    <!-- 详情 -->
    <div id="detail" style="display: none;">
        <div class="park-goods-detail-text">{:htmlspecialchars_decode($info['goods_content'])}</div>
    </div>
    <!-- 评论 -->
    <div id="comment" style="display: none;">
        <div class="park-goods-comment">
            <div class="park-goods-comment__star">
                <i class="iconfont icon-star <if condition="$comment_number gt 0">active</if>"></i>
                <i class="iconfont icon-star <if condition="$comment_number gt 1">active</if>"></i>
                <i class="iconfont icon-star <if condition="$comment_number gt 2">active</if>"></i>
                <i class="iconfont icon-star <if condition="$comment_number gt 3">active</if>"></i>
                <i class="iconfont icon-star <if condition="$comment_number gt 4">active</if>"></i>
            </div>
            <div class="park-goods-comment__title">商品评分</div>
            <div class="park-goods-comment__rate">
                <p>{$good_number}%</p>
                <p>好评</p>
            </div>
        </div>
        <div class="park-comment-list">
            <volist name="comment_list" id="val">
            <div class="park-comment-item">
                <div class="park-comment-item__face" style="background-image: url('{$val.head_picture}')"></div>
                <div class="park-comment-item__time">{$val.add_time|date='Y-m-d',###}</div>
                <div class="park-comment-item__username">{$val.user_name}</div>
                <div class="park-comment-item__star">
                    <i class="iconfont icon-star <if condition="$val['star'] gt 0">active</if>"></i>
                    <i class="iconfont icon-star <if condition="$val['star'] gt 1">active</if>"></i>
                    <i class="iconfont icon-star <if condition="$val['star'] gt 2">active</if>"></i>
                    <i class="iconfont icon-star <if condition="$val['star'] gt 3">active</if>"></i>
                    <i class="iconfont icon-star <if condition="$val['star'] gt 4">active</if>"></i>
                </div>
                <div class="park-comment-item__text">{$val.contents}</div>
                <div class="park-comment-item__imgs clearfix">
                    <volist name="val['images']" id="vo">
                    <div class="image" style="background-image: url('__ROOT__/Public/upload/user/{$vo}')"></div>
                    </volist>
                </div>
            </div>
            </volist>
        </div>
    </div>
</div>
<!-- footer -->
<div class="park-goods-footer">
    <div class="park-goods-footer__collect" onclick="add_collect({$info.id},{$info.store_id});">
        <i class="iconfont icon-shoucang"></i>
        <span>收藏</span>
    </div>
    <div class="park-goods-footer__cart" onclick="window.location='/Home/Cart/index/';">
        <i class="iconfont icon-cart"></i>
        <span>购物车</span>
    </div>
    <div class="park-goods-footer__add" onclick="sum_form();">加入购物车</div>
</div>
<!-- 商品选择 -->
<div id="goods-choose" class="park-goods-choose" style="display: none;">
    <div class="park-goods-choose-info">
        <div class="park-goods-choose-info__price">
            <span class="price1" id="shop_price">{$info['shop_price']}</span>&nbsp;&nbsp;<span class="price2" id="mk_price">{$info['mk_price']}</span>
        </div>
        <div class="park-goods-choose-info__spec" id="spec_name"></div>
        <div class="park-goods-choose-info__pic" style="background-image: url('{$info.thumb}')"></div>
    </div>
    <div class="park-goods-choose-spec">
        <div class="park-goods-choose-spec__title">规格</div>
        <div class="park-goods-choose-spec__list">
            <ul id="spec_list">
                <volist name="info['spec']" id="val">
                    <li data-id="{$val.id}" data-spec-price="{$val.spec_price}" data-mk-price="{$val.spec_mk_price}" onclick="spec_click(this,{$val.id});">{$val.spec_name}</li>
                </volist>
            </ul>
        </div>
    </div>
    <div class="park-goods-choose-num">
        <div class="park-goods-choose-num__title">购买数量</div>
        <div class="park-goods-choose-num__total">
            <div class="park-goods-count">
                <i class="iconfont icon-jian" onclick="add_cart(1);"></i>
                <span id="cart_number">1</span>
                <i class="iconfont icon-jia" onclick="add_cart(2);"></i>
            </div>
        </div>
    </div>
</div>
<!-- mask -->
<div class="park-mask"></div>
<script src="__ROOT__/Public/Home/layer/layer.js"></script>
<script>
    $(function () {
        // 轮播图
        var mySwiper = new Swiper('.swiper-container', {
            autoplay: 3000,
            pagination : '.swiper-pagination',
            loop: true,
            autoplayDisableOnInteraction: false
        });

        // 导航
        $(document).on('click', '.park-detail-navs li', function () {
            var li = $('.park-detail-navs li');

            $.each(li, function (ind, val) {
                $($(val).removeClass('active').attr('data-target')).hide();
            });

            $($(this).addClass('active').attr('data-target')).show();
        });

        // 全部评论
        $(document).on('click', '#comment-link', function () {
            $('.park-detail-navs li').eq(2).trigger('click');
        });

        // 显示规格
        $(document).on('click', '#choose-spec' , function () {
            $('#goods-choose').show();
            PARK.showMask();
        });

        // 隐藏规格
        $(document).on('click', '.park-mask', function () {
            $('#goods-choose').hide();
        });

    });
    function add_collect(id,store_id){
        $.post('/Home/Index/add_collect/',{goods_id:id,store_id:store_id},function(data){
            layer.open({
                content:data.msg
                ,skin: 'msg'
                ,time: 2 //2秒后自动关闭
            });
        },'json');
    }
    function spec_click(obj,id) {
        $(obj).addClass('active').siblings().removeClass('active');
        var data_spec_price = $(obj).attr('data-spec-price');
        $('#shop_price').html(data_spec_price);
        var data_mk_price = $(obj).attr('data-mk-price');
        $('#mk_price').html(data_mk_price);
        $('#spec_name').html('规格:'+$(obj).html());
    }
    function add_cart(num){
        var cart = parseInt($('#cart_number').html());
        if(num==1){
            if(cart==1){
                layer.open({
                    content:'至少要购买一件'
                    ,skin: 'msg'
                    ,time: 2 //2秒后自动关闭
                });
                return false;
            }
            cart-=1;
        }else{
            cart+=1;
        }
        $('#cart_number').html(cart);
    }
    function sum_form(){
        var goods_id = '{$info.id}';
        var store_id = '{$info.store_id}';
        var spec_id = $('#spec_list li.active').attr('data-id');
        if(!spec_id){
            $('#goods-choose').show();
            PARK.showMask();
            return false;
        }
        var goods_number = $('#cart_number').html();
        $.post('/Home/Cart/add_cart/',{goods_id:goods_id,store_id:store_id,spec_id:spec_id,goods_number:goods_number,act:'add'},function(data){
            layer.open({
                content:data.msg
                ,skin: 'msg'
                ,time: 2 //2秒后自动关闭
            });
        },'json');
    }
</script>
</body>
</html>